<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title> 家計簿　</title>
    <script type="text/javascript" src="js/prototype-1.6.0.3.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript" src="js/calendar.js"></script>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/account.css" rel="stylesheet" type="text/css">
  </head>
<body>
  {% include "_menu.html" %}
<div id="top_div">
<span id="month_select"></span>
<span id="this_month"></span>
<span class="caution">*家計簿のメモがカレンダーに表示されます。</span>
<span class="caution">*日付クリックでその日付の家計簿に移ります。</span>
</div>
<table class="calendar">
  <thead>
    <tr>
      <th><span style="color:red">日</span></th>
      <th><span style="color:black">月</span></th>
      <th><span style="color:black">火</span></th>
      <th><span style="color:black">水</span></th>
      <th><span style="color:black">木</span></th>
      <th><span style="color:black">金</span></th>
      <th><span style="color:blue">土</span></th>
    </tr>
  </thead>
  <tbody id="month_body">
  </tbody>
</table>
  <script type="text/javascript">
  var calendar = null
  function dispCalendar()
  {
    $("this_month").update(calendar.getDateStr());
    calendar.makeCalendar('month_body');
    var hash = new Object();
    hash["from_year"] = calendar.year;
    hash["from_month"] = calendar.month;
    hash["from_day"] = 1;
    hash["to_year"] = calendar.year;
    hash["to_month"] = calendar.month;
    hash["to_day"] = calendar.lastDate;
    hash["temp"] = makeTemporaryQuery();
    hash=$H(hash);
    var a = new Ajax.Request( 
        "/memoList.json", 
        { 
            "method": "get",
            "parameters": hash.toQueryString(),
            onSuccess: function(response) { 
              var clean = response.responseText.gsub(/</,"&lt;").gsub(/>/,"&gt;").gsub(/'/,"&apos;");
              var dataSet = clean.evalJSON(true);
              addMemoList(dataSet);             
            }, 
            onFailure: function(request) { 
                alert('読み込みに失敗しました'); 
            }, 
            onException: function (request) { 
                alert('読み込み中にエラーが発生しました'); 
            } 
        }); 
      return false;
  }
  function addMemoList(dataSet)
  {
      for(var i=0;i<dataSet.length;i++)
      {
        $("day_"+dataSet[i].date).insert({bottom:'<div style="font-size:12px">'+dataSet[i].memo+'</div>'});
      }
  }
  document.observe('dom:loaded',function(){
      var toDay=new Date();
      calendar = new Calendar("calendar","month_select",dispCalendar);
      dispCalendar();

  });
  </script>
</body>
</html>
